<template>
  <el-row class="contract_base_title">{{ t('keys.contract_party') }}</el-row>
  <div class="address" v-if="props.list?.length">
    <div class="address_item" v-for="(item, index) in props.list" :key="index">
      <template v-for="(v, i) in props.itemInfo.formTemplateFieldVOList" :key="i">
        <div class="address_item_title textoverflow" v-if="i === 0">
          <span class="address_item_title_bg" :class="index === 1 ? 'address_item_title_bg_blue' : ''">{{ index === 0 ?  t('keys.we'):  t('keys.other_party') }}</span>
          {{ item[v.fieldCode] || '' }}
        </div>
        <div class="address_item_adr textoverflow" v-if="i === 1">
          <i class="zcb zcblocation"></i>{{ v.fieldName ||  t('keys.address') }}：
          <el-popover placement="top-start" :width="200" trigger="hover" v-if="item[v.fieldCode]?.length >= 15" :content="item[v.fieldCode]">
            <template #reference>
              {{ item[v.fieldCode] }}
            </template>
          </el-popover>
          <template v-else>
            {{ item[v.fieldCode] }}
          </template>
        </div>
        <div class="address_item_adr textoverflow" v-if="i === 2">
          <i class="zcb zcbuser"></i> {{ v.fieldName ||  t('keys.contactsName') }}：
          {{ item[v.fieldCode] }}
        </div>
        <div class="address_item_adr textoverflow" v-if="i === 3">
          <i class="zcb zcbphone"></i> {{ v.fieldName ||  t('keys.contact_information') }}：
          {{ item[v.fieldCode] }}
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const props = defineProps({
  list: {
    type: Object,
    default: () => {}
  },
  itemInfo: {
    type: Object,
    default: () => {}
  }
})
const itemList = ref([])
nextTick(() => {
  itemList.value = props.itemInfo.formTemplateFieldVOList
})
</script>

<style lang="scss" scoped>
.address {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .address_item {
    width: calc(100% / 2 - 12px);
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #ebebeb;
    margin-right: 12px;
    margin-bottom: 12px;
    .address_item_title {
      font-size: 16px;
      color: #333;
      font-weight: 550;
      margin: 12px 16px;
      .address_item_title_bg {
        width: 48px;
        height: 24px;
        display: inline-block;
        background: var(--el-color-primary);
        border-radius: 2px;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        font-weight: 400;
        margin-right: 12px;
        // 对方
        &.address_item_title_bg_blue {
          background: #0077ff !important;
        }
      }
    }
    .address_item_adr {
      font-weight: 400;
      color: #666666;
      font-size: 14px;
      margin: 0px 16px 12px 16px;
      display: flex;
      align-items: center;
      i.zcb {
        margin-right: 4px;
      }
    }
  }
  .address_item:nth-child(even) {
    margin-right: 0px;
  }
}

.textoverflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
